<template>
  <div class="hello">
    <h1>群组 Group</h1>
    <el-button type="" @click="add">add node</el-button>

    <div id="container3"></div>
  </div>
</template>

<script>
import { Shape, Graph, DataUri } from "@antv/x6";

export default {
  name: "Cell",
  data() {
    return {
      activeName: "1",
      graph: "",
      data: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let width = document.body.clientWidth; //网页可见区域宽：
      let height = document.body.clientHeight; //网页可见区域高：
      const graph = new Graph({
        container: document.getElementById("container3"),
        width,
        height: 900,
        panning: {
          enabled: true, //画布可以平移
        },

        background: {
          color: "#fffbe6", // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      });

      graph.centerContent(); //内容居中
      graph.fromJSON(this.data);
      this.graph = graph;
      const child = graph.addNode({
        x: 120,
        y: 80,
        width: 120,
        height: 60,
        zIndex: 10,
        label: "Child\n(embedded)",
        attrs: {
          body: {
            fill: "green",
          },
          label: {
            fill: "#fff",
          },
        },
      });

      const parent = graph.addNode({
        x: 80,
        y: 40,
        width: 320,
        height: 240,
        zIndex: 1,
        label: "Parent\n(try to move me)",
      });

      parent.addChild(child);
    },
    add() {},
  },
};
</script>

<style scoped lang="scss">
.hello {
  width: 100%;
  height: 1000px;
}
#container {
  width: 100%;
  height: 100%;
}
.x6-node rect {
  fill: #2ecc71;
  stroke: #000;
}
</style>
